<template>
  <a-modal class="limit-modal" @cancel="close" width="85vw" title="年检详情" :visible="visible" unmount-on-close>
    <a-spin :loading="loading" tip="加载中..." class="w-full">
      <car-info-block :carInfo="record" :fieldList="fieldList" />
      <a-divider />

      <card title="年检信息">
        <a-descriptions :align="{ label: 'right' }">
          <a-descriptions-item label="年检单关联门店">{{ record.siteName }}</a-descriptions-item>
          <a-descriptions-item label="本次年检日期">
            <UnitValue :value="record.inspectionTime" format="date" />
          </a-descriptions-item>
          <!-- 不做回显 -->
          <!-- <a-descriptions-item label="年检间隔时间"><UnitValue :value="record.inspectionLimitDay" unit="天" /></a-descriptions-item> -->

          <a-descriptions-item label="年检厂">{{ record.location }}</a-descriptions-item>
          <a-descriptions-item label="年检证">
            <img-link :value="record.inspectionFileId" title="查看年检证" />
          </a-descriptions-item>
          <a-descriptions-item label="年检有效期至">{{ record.planTime }}</a-descriptions-item>

          <a-descriptions-item label="负责人">{{ record.undertaker }}</a-descriptions-item>
          <a-descriptions-item label="关联订单号">
            <a-link v-if="record.orderNo" type="link" @click="() => onLink(record)">{{ record.orderNo }}</a-link>
            <div v-if="record.giveStaffName">(交车人：{{ record.giveStaffName }})</div>
          </a-descriptions-item>

          <a-descriptions-item label="承租人信息" :span="2">
            <div>
              <template v-if="record.memberName && record.memberPhone"> {{ record.memberName }} {{ record.memberPhone }} </template>
              <template v-else>-</template>
            </div>
          </a-descriptions-item>
          <a-descriptions-item label="备注" :span="3">{{ record.remark }}</a-descriptions-item>
          <a-descriptions-item label="照片" :span="3">
            <upload-img v-model="record.fileIdList" disabled />
          </a-descriptions-item>
        </a-descriptions>
      </card>

      <card title="年检费用" style="margin-bottom: -30px">
        <a-descriptions :align="{ label: 'right' }">
          <a-descriptions-item label="年检费">
            <UnitValue :value="record.inspectionAmount" unit="元" />
          </a-descriptions-item>
          <a-descriptions-item label="费用备注" span="2">{{ record.feeRemark }}</a-descriptions-item>
          <!-- 对齐 -->
          <a-descriptions-item label="">&nbsp;</a-descriptions-item>
          <a-descriptions-item label="">&nbsp;</a-descriptions-item>
          <a-descriptions-item label="">&nbsp;</a-descriptions-item>
        </a-descriptions>
      </card>

      <!-- 已付款状态展示 -->
      <card title="结算信息" :showDivider="false" v-if="assetFeeInfo?.feeStatus == 1">
        <a-descriptions :align="{ label: 'right' }">
          <a-descriptions-item label="结算时间">{{ assetFeeInfo.confirmTime }}</a-descriptions-item>
          <a-descriptions-item label="结算方式">{{ assetFeeInfo.payTypeName }}</a-descriptions-item>
          <a-descriptions-item label="结算账号">{{ assetFeeInfo.payAccountName }}</a-descriptions-item>

          <a-descriptions-item label="供应商名称">{{ assetFeeInfo.customerName }}</a-descriptions-item>
          <a-descriptions-item label="供应商收款账号">{{ assetFeeInfo.customerAccount }}</a-descriptions-item>
          <a-descriptions-item label="结算备注">{{ assetFeeInfo.settlementRemark }}</a-descriptions-item>
          <a-descriptions-item label="结算凭证" :span="3">
            <upload-img v-model="assetFeeInfo.fileIdList" disabled />
          </a-descriptions-item>
        </a-descriptions>
      </card>
    </a-spin>
    <template #footer>
      <a-button @click="close">关闭</a-button>
    </template>
  </a-modal>
</template>

<script setup>
  import { ref } from 'vue'
  import { inspectDetail } from '@/api/asset/carInspect'
  import useNavigate from '@/hooks/useNavigate'

  const { navigateTo } = useNavigate()

  const visible = ref(false)
  const open = (record) => {
    visible.value = true
    getDetail(record.id)
  }
  const close = () => {
    visible.value = false
    record.value = {}
    assetFeeInfo.value = null
  }

  const fieldList = ref([
    { label: '车架号', prop: 'vin' },
    { label: '车辆当前归属门店', prop: 'carSiteName' },
    { label: '归属车场', prop: 'libraryName' },
    { label: '年检单号', prop: 'inspectionNo' },
  ])

  const record = ref({})
  const assetFeeInfo = ref(null)
  const loading = ref(false)
  const getDetail = (id) => {
    loading.value = true
    inspectDetail({ id: id }).then((res) => {
      loading.value = false
      record.value = res.result
      assetFeeInfo.value = res.result.assetFeeInfo
    })
  }

  const onLink = (record) => {
    const { orderType, businessOrderId, orderNo, orderCode } = record
    const code = orderCode || orderNo
    // 长租
    if (orderType == 3) {
      navigateTo(`/long-order/detail/${businessOrderId}`, `${code}-长租详情`)
      return
    }
    // 短租
    navigateTo(`/short-order/detail/${businessOrderId}`, `${code}-短租详情`)
  }

  defineExpose({
    open,
  })
</script>
